<style lang="less" scoped>
	.sale_item{
		background :#fff;
		margin:20px 0;
		border-top:1px solid #DCDFE6;
		border-bottom: 1px solid #DCDFE6;
		font-size: 12px;
		.saleheader{
			font-size: 14px;
			padding: 0 10px;
			line-height: 30px; border-bottom: 1px dashed #DCDFE6;
			.time{font-size: 13px; font-family: Arial; padding-left:10px; color:#909399;}
		}
		ul{
			padding-left:10px;
			li{
				position: relative;
				margin-top:10px;
				margin-bottom:10px;
				padding-right:10px;
				padding-left:90px;
				height:80px;
				img{position: absolute;left:0;top:0; width:80px; height:80px; display: block}
				p{
					color:#909399;
					height:19px;
					line-height:19px;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;
					white-space: nowrap;
				}
			}
		}
		.salefooter{
			 border-top: 1px dashed #DCDFE6;
			 text-align: right;
			 font-size: 14px; line-height: 30px;
			 padding:0 10px;
			 span{
				 color:#F56C6C;
				 font-size: 16px; padding:0 4px; font-family: Arial;
			 }
		}
	}
</style>

<template>
	<div class="sale_box" v-loading="loading">
		<div class="sale_item" v-for="item in data" :key="item.id">
			<div class="saleheader">
				<span class="time">{{item.tocollect.sale_date}}</span><span class="time">({{item.tocollect.employee_name}})</span>
			</div>
			<ul>
				<li>
					<img v-if="item.item.images != ''" :src="$http.IMGURL+item.item.images" />
                    <img v-else src="http://res2.esf.leju.com/esf_www/statics/images/default-img/detail.png"/>
					<h3>{{item.item.title}}</h3>
					<p>
						<!--<span v-for="(attr,key) in item.item.goods.attrs" :key="item.item.title+key">-->
						<span v-for="(attr,key) in item.item.spec_data" :key="item.item.title+key">
							{{key}}：{{attr}}
						</span>
					</p>
					<p>吊牌价：￥{{item.sell_total}}</p>
				</li>
			</ul>
			<div class="salefooter">
				共<span>{{item.buynum}}</span>件, 优惠<span>{{item.youhui}}</span>实收<span>￥{{item.should_income}}</span>
			</div>
		</div>
    <back></back>
    	<load-more v-if="!data.length" :show-loading="false" tip="暂无消费记录" background-color="#fbf9fe"></load-more>
	</div>
</template>

<script>
	import { mapState, mapActions, mapMutations } from 'vuex'
  import back from '@/components/back/backPrev';
	export default {
		components:{
      back
		},
		data(){
			return {
				data : [],
				loading : false
			}
		},
		methods : {
			storename(id){
				let store = this.storedata.filter(i => i.id == id);
				if(store.length){
					return store[0].name
				}
				return '';
			},
			initdata(){
				this.loading = true;
				this.$http.order.post('saleinfo/wxvipsale').then(res => {
					if(!res.data.code){
						this.data = res.data.data;
						this.$http.item.get('item/search',{
							params: {
								item_ids : res.data.data.map(i => i.sku_id).join(',')
							}
						}).then(item => {
							if(!res.data.code){
								this.data = res.data.data.map(i => {
								  // console.log(i)
                  i.youhui=parseFloat(i.discount_discount)+parseFloat(i.active_discount)+parseFloat(i.coupon_discount)+parseFloat(i.order_discount)+parseFloat(i.erase_discount)+parseFloat(i.jffx_discount)
									return Object.assign(i,{
										item : item.data.data.data.filter(j => j.id == i.sku_id)[0]
									})
								})
							}
							this.loading = false;
						})
              .catch(err => {
                this.$message({
                  message: '登陆过期，请重新登陆！',
                  type: 'error'
                });
                localStorage.removeItem('user');
                localStorage.removeItem('company');
                localStorage.removeItem('api_token');
                localStorage.removeItem('refresh_token');
                location.reload()
              })
					}else{
						this.loading = false;
					}
				})
			},
		},
		created(){
			this.initdata();
			this.$store.dispatch('user/stores/initdata');
		},
		computed : {
			storedata(){
				return this.$store.state.user.stores.data;
			}
		}
	}
</script>
